<template>
    <div class="search-page">
        <div class="search-input">
            <div class="search-page-container">
                <div class="search-box">
                    <img src="~assets/icons/search.png" alt="">
                    <input type="search" placeholder="请输入您要查找的商品" v-model="searchContent" @keypress="searchDetail($event)">
                </div>
            </div>
        </div>
        <div class="search-content">
            <div class="search-list" v-for="(item,index) in content" :key="index">
                <div class="avatar">
                    <img :src="item['image_url']" alt="">
                </div>
                <div class="detail">
                    <p>{{item.name}}</p>
                    <p>{{item.content}}</p>
                    <p>￥{{item.goods[0].price}}</p>
                    <p>{{item['sales_volume']}}销量 
                        <span v-if="item.type == 1">{{item.integral}}积分</span>
                    </p>
                </div>
                <div class="to-detail-btn" @click="toDetail(item.id)">
                    <span>查看详情</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Indicator, Toast } from 'mint-ui';

export default {
    name:'searchPage',
    data(){
        return {
            searchContent:'',
            content:[]
        }
    },
    methods:{
        searchDetail(ev){
            if(this.searchContent == ''){
                this.toast('请输入搜索内容！');
                return;
            }
            let that = this;
            let token = localStorage.getItem('token');
            if(ev.keyCode == 13){
                //发起请求
                 Indicator.open({
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                })
                that.$ajax(that, 'post', that.$api.search, {name:that.searchContent}, token, function(res){
                    console.log(res);
                    if(res.data['error_code'] == 0){
                        let temData = res.data.msg;
                        that.transferUrl(temData);
                        that.content = temData;
                    }else{
                        Toast({
                            message: res.data['msg'],
                            position: 'bottom',
                            duration: 3000
                        })
                    }
                    Indicator.close();
                })
            }
        },
        toDetail(id){
            this.$router.push({path:'/product', query:{id:id}});
        }
    },
    mounted(){
        this.$store.state.tab = '搜索';
    },
    activated(){
        this.$store.state.tab = '搜索';
    },
    components:{
        Indicator,
        Toast
    }
}
</script>

<style lang='less'>
@rem:100rem;

.search-page{
    margin-top: 88/@rem;
}


.search-input{
    width: 750/@rem;
    height: 70/@rem;
    position: relative;
}
.search-page-container{
    width: 100%;
    height: 70/@rem;
    box-sizing: border-box;
    padding: 0 20/@rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f8f8;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    .search-box{
        width: 100%;
        height: 58/@rem;
        box-sizing: border-box;
        border:2/@rem solid #eeeeee;
        border-radius: 16/@rem;
        display: flex;
        align-items: center;
        background: #fff;
        img{
            height: 26/@rem;
            width: 26/@rem;
            margin: 0 20/@rem;
        }
        input{
            width: 100%;
            outline: none;
            border: none;
        }
    }
}

.search-content{
    width: 100%;
    .search-list{
        width: 100%;
        height: 230/@rem;
        box-sizing: border-box;
        padding: 0 20/@rem;
        border-bottom: 1px solid #e0e0e0;
        background: #fff;
        display: flex;
        align-items: center;
        position: relative;
        .avatar{
            width:110/@rem;
            height: 110/@rem;
            img{
                width: 110/@rem;
                height: 110/@rem;
            }
        }
        .detail{
            display: flex;
            flex-direction: column;
            width: 500/@rem;
            height: 100%;
            margin-left: 50/@rem;
            justify-content: center;
            p{
                text-align: start;
                font-size: 22/@rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            p:nth-of-type(1){
                font-size: 30/@rem;
            }
            p:nth-of-type(2){
                margin-top: 10/@rem;
            }
            p:nth-of-type(3){
                font-size: 30/@rem;
                color: #fe0000;
                margin-top: 20/@rem;
            }
            p:nth-of-type(4){
                font-size: 20/@rem;
                color: #b0b0b0;
                margin-top: 20/@rem;
                span{
                    margin-left: 20/@rem;
                }
            }
        }
        .to-detail-btn{
            width: 188/@rem;
            height: 52/@rem;
            position: absolute;
            background: #fd4141;
            right: 20/@rem;
            bottom: 20/@rem;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99;
            border-radius: 10/@rem;
            span{
                color: #ffffff;
            }
        }
        .to-detail-btn:active{
            background: #f13c3c;
        }
    }
}
</style>
